<template>
<!-- ref 父访问子 -->
 <div class="wrapper" ref="wrapper">
     <div class="content">
        <slot></slot>
     </div>
     
 </div>
</template>

<script>
import BSrcoll from 'better-scroll'

export default({
    name:'Scroll',
    props:{
        probeType:{
            type:Number,
            default(){
                return 0
            }
        },
        pullUpLoad:{
            type:Boolean,
            default(){
                return false
            }
        }
    },
    data(){
        return {
            scroll:null,
        }
    },
    mounted(){
        this.scroll = new BSrcoll(this.$refs.wrapper,{
            /* 包含的元素要点击 */
            click:true,
            probeType:this.probeType,
            /* 触发时机：当底部下拉距离超过阈值 */
            pullUpLoad:this.pullUpLoad
        })

        //2.监听滚动的位置
        this.scroll.on('scroll',(position) => {
           /*  console.log(position) */
           this.$emit('scroll',position)
        })

        //3.监听上拉加载更多事件
        this.scroll.on('pullingUp',() => {
            this.$emit('pullingUp')
        })
    },
    methods:{
        scrollTo(x,y,time=300){
           this.scroll && this.scroll.scrollTo(x,y,time)
        },
        finishPullUp(){
           this.scroll.finishPullUp()
        },
        refresh(){
            this.scroll && this.scroll.refresh()
        }
    }
})

</script>

<style scoped>

</style>
